
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>FindFriend</title>
    <link rel="stylesheet" href="/Public/Swoole/layui/build/css/layui.css" media="all">
    <link href="/Public/Swoole/css/demo.css?v=t8da_EwBfHNrp5E39YvZRtSIMyPxGpu7CRBNfmi1bLk1" rel="stylesheet"/>

    <script src="/Public/Swoole/layui/build/layui.js"></script>
    <script src="/Public/Swoole/js/ImAction.js?v=1"></script>

    <style type="text/css">
        .layui-form-sure {
            left: -5px;
        }

        .layui-form-li {
            margin-bottom: -4px;
        }
        .media-body {

            margin-left: 100px;
        }
    </style>
</head>
<body>
<div class="layui-tab" style="margin-top:-1px">
    <ul class="layui-tab-title" style="left: 0px;">
        <li class="layui-tab-this">找人</li>
        <li class="">找群</li>
        <li class="">个人设置</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <div id="find" style="margin-left:10px">
                <form class="layui-form">
                    <li class="layui-form-li">
                        <input type="text" style="width:500px" placeholder="输入好友号吗/昵称/关键词/邮箱/手机" />
                        <div class="layui-form-label layui-form-checkbox">
                            <label>在线</label>
                            <input type="checkbox" name="love[yinyue]">
                        </div>
                    </li>
                    <li class="layui-form-li">
                        <div class="layui-form-label">
                            <label>省份</label>
                            <select required name="province">
                                <option value="浙江省">浙江省</option>
                                <option value="江西省">江西省</option>
                                <option value="上海市">上海市</option>
                                <option value="福建省">福建省</option>
                                <option value="湖北省">湖北省</option>
                                <option value="江苏省">江苏省</option>
                                <option value="安徽省">安徽省</option>
                                <option value="北京市">北京市</option>
                                <option value="香港">香港</option>
                                <option value="澳门">澳门</option>
                                <option value="台湾省">台湾省</option>
                            </select>
                        </div>
                        <div class="layui-form-label">
                            <label>姓别</label>
                            <select required name="province">
                                <option value="0">不限</option>
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                        <div class="layui-form-label">
                            <label>年龄</label>
                            <select required name="province">
                                <option value="0">不限</option>
                                <option value="17">18岁以下</option>
                                <option value="18-22">18-22岁</option>
                                <option value="23-28">23-28岁</option>
                                <option value="29-35">29-35岁</option>
                                <option value="36">35岁以上</option>
                            </select>
                        </div>
                        <button class="layui-form-button">查找</button>
                    </li>

                </form>
            </div>
            <div id="firendview" style="margin-left:15px"></div>
            <div id="page" style="text-align:center;margin-top:10px"></div>
        </div>
        <div class="layui-tab-item">2</div>
        <div class="layui-tab-item">

        </div>

    </div>
</div>

<script id="friden" type="text/html">
    <div class="media-inline">
        {{# for(var i = 0, len = d.length; i < len; i++){ }}
        <div class="media clearfix" style="line-height:25px;width:220px">
            <a class="float-left" href="javascript:;">
                <img src="{{d[i].avatar}}" class="img-border radius-big" style="width:80px;height:80px">
            </a>
            <div class="media-body">
                <strong>{{d[i].username}}</strong>
                22岁|四川.成都<br />
                {{#  if(d[i].status=='hide') { }}
                <span class="badge bg-gray">离线</span>
                {{# }else{ }}
                <span class="badge bg-green">在线</span>
                {{# } }}
                    <span type="button" class="badge bg-sub" data-id="{{d[i].Id}}" data-head="{{d[i].avatar}}" style="cursor:pointer">
                        <i class="icon-plus"></i>&nbsp; 加好友
                    </span>
            </div>
        </div>
        {{# } }}
    </div>
</script>






<script type="text/javascript">
    layui.use(['layim', 'laypage', 'layout', 'form'], function (layim) {
        var layer = layui.layer, laypage = layui.laypage, laytpl = layui.laytpl, layout = layui.layout
                , form = layui.form;

        layout.tab();
        form.checkbox();
        form.select();
        form.check({}, function (data) {
            layer.msg("未完善。", { icon: 5 })
        });



        laypage({
            cont: 'page', //容器。值支持id名、原生dom对象，jquery对象,
            pages: 11, //总页数
            first: false,
            last: false,
            jump: function (e, first) { //触发分页后的回调
                loadFriend(layui.jquery,layer, laytpl, laypage, e.curr);
            }
        });
    })


</script>
</body>
</html>
